<template>
  <div class="register_body">
    <div>
      用户名：<input v-model="account" class="register_text" type="text">
    </div>
    <div>
      密码：<input v-model="password" class="register_text" type="password">
    </div>
    <div class="register_btn">
      <button @click="handleRegister">注册</button>
    </div>
    <div class="register_link">
      <router-link to="mine">立即登录</router-link>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapMutations} from "vuex";

export default{
name :'registerView',
  data(){
  return{
    account : '',
    password : '',
  }
  },
  computed: {
    ...mapGetters(['testUserInfo']),
  },
  methods: {
    ...mapMutations(['register']),

    handleRegister() {
      if(!this.account.trim()) return alert('用户名不能为空！');
      if(!this.password) return alert('请输入密码！');
      let testInfo = this.testUserInfo(this.account)
      if (testInfo && testInfo.account) {
        alert('用户名已存在！')
        this.account = ''
        this.password = ''
      } else {
        const params = {
          account: this.account,
          password: this.password,
        }
        this.register(params)
        alert('注册成功')
        this.$router.back()
      }
    }
  },

}
</script>

<style scoped>
.register_body{  width:100%;}
.register_body .register_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.register_body .register_btn{ height:50px; margin:10px;}
.register_body .register_email button{ position: absolute; right:10px; top:10px; height:30px; border-radius: 3px; border:none; padding:5px;}
.register_body .register_btn button{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.register_body .register_link{ display: flex; justify-content:space-between;}
.register_body .register_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>
